import React, { memo } from 'react'
import { Layout, Menu } from 'antd'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons'
import '../../assets/styles/components/home/header.scss'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

const {Header} = Layout
const {SubMenu} = Menu

const HeaderUI = (props) => {
  const {toHome, title, userName, handleLogout} = props
  console.log('headerUI render')
  return (
    <Header className="header">
      <Link to="/" className="logo" onClick={toHome}>
        <div className="img"></div>
        <h1 className="head-title">京西菜市·管理后台<span className="little-txt"> - {title}</span></h1>
      </Link>
      <div className="right-menu">
        <Menu mode="horizontal">
          <SubMenu icon={<UserOutlined />} title={userName}>
            <Menu.Item>用户信息</Menu.Item>
          </SubMenu>
          <Menu.Item icon={<LogoutOutlined />} onClick={handleLogout}>退出登录</Menu.Item>
        </Menu>
      </div>
    </Header>
  )
}

HeaderUI.propTypes = {
  toHome: PropTypes.func,
  title: PropTypes.string,
  userName: PropTypes.string,
  handleLogout: PropTypes.func
}

HeaderUI.defaultProps = {
  toHome: () => {},
  handleLogout: () => {}
}

export default memo(HeaderUI)
